<!-- 选择监测点 -->
<template>
    <div class="w100p relative" :id="id">
        <a-tree-select
            :getPopupContainer="getContainer"
            v-model="defaultValus"
            show-search
            :allow-clear="allowClear"
            :treeNodeFilterProp="'title'"
            style="width:100%;"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="areaList"
            :placeholder="placeholder"
            :multiple="multiple"
            :replaceFields="FieldsObj"
            @change="changeType"
        >
        </a-tree-select>
    </div>

</template>

<script>
import global from "@/assets/js/global";
export default {
    name: "select_detection",
    props:{
        lastLevel:{
            type:Number, // 大于几级之后不能选择
        },
        source:{
        //    当前选中的内容

        },
        multiple:{
            // 是否可以多选
            type:Boolean,
            default:false,
        },
        placeholder:{
            type:String,
            default:"请选择"
        },
        allowClear:{
            type:Boolean,
            default:true,
        },
        notAllowArr:{
            // 不能被选择的ID数组
            type:Array,
            default(){
                return []
            },
        }
    },
    watch:{
        source:{
            deep:true,
            handler(value){
                if(this.multiple){
                    this.defaultValus = value ? [...value] : undefined
                }else{
                    this.defaultValus = value || undefined
                }
            },
        },
        notAllowArr:{
            deep:true,
            handler(value){
                this.disabledItem(this.areaList)
            },
        }
    },
    beforeMount() {
        this.getList()
        if(this.multiple){
            this.defaultValus = this.source ? [...this.source] : undefined
        }else{
            this.defaultValus = this.source || undefined
        }
    },
    mounted() {

    },
    data(){
        return{
            id:global.getRandomId(),
            FieldsObj: {
                title: "supervisePointName",
                value: "id",
                key: "id",
                children: "leaf",
            },
            areaList:[],
            defaultValus:'',
        }
    },
    methods:{
        disabledItem(arr){
            arr.map((item)=>{
                if((item.level >= this.lastLevel && this.lastLevel) || this.notAllowArr.includes(item.id)){
                    item.disabled = true;
                }
                if(item.leaf && item.leaf.length){
                    this.disabledItem(item.leaf)
                }
            })
        },
        getContainer(){
            // 指定父级容器,解决滚动条滚动时,选择框跟着移动的问题
            return document.getElementById(this.id)
        },
        changeType(value){
            this.$emit('changeArea',value)
        },
        getList() {
            this.$axios.get(this.$url.selectSupervisePointManageByOrganizationId, {
                params: {
                    orgId: this.$store.state.user.info.currentUserDTO.organizationId
                }
            }).then((data) => {
                this.areaList = data.data
                this.disabledItem(this.areaList)
            })
        },

    },
}
</script>

<style scoped>

</style>